<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户&渠道管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span
          class="u-cursor"
          @click="$router.replace('/cpa/channel-pro')"
        >投放管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>新建产品</el-breadcrumb-item>
    </el-breadcrumb>
    <Container class="u-pb60">
      <el-form
        ref="form"
        :model="channelPro_from"
        label-width="160px"
        class="m-form--detail"
      >
        <el-form-item label="客户名称：">
          <el-select
            size="small"
            style="width: 400px;"
            v-model="channelPro_from.customerCode"
            filterable
            placeholder="请选择"
            @change="cusSelect"
            :disabled="dateStatus"
          >
            <el-option
              v-for="item in customer_items.options "
              :key="item.customerCode"
              :label="item.name"
              :value="item.customerCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称：">
          <el-select
            size="small"
            style="width: 400px;"
            v-model="channelPro_from.productCode"
            placeholder="请选择"
            @change="proSelect"
            :disabled="dateStatus"
            filterable
          >
            <el-option
              v-for="item in pro_items.options"
              :key="item.id"
              :label="item.productName"
              :value="item.customerProductCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上游渠道号：">
          <el-select
            size="small"
            style="width: 400px;"
            v-model="channelPro_from.customerProductCode"
            placeholder="请选择"
            :disabled="dateStatus"
            filterable
          >
            <el-option
              v-for="item in channelPro_items.options"
              :key="item.productPackageCode"
              :label="item.productChannelCode "
              :value="item.productPackageCode"
              :disabled="item.packageStatus==1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投放渠道：">
          <el-select
            size="small"
            style="width: 400px;"
            v-model="channelPro_from.channelCode"
            placeholder="请选择"
            :disabled="dateStatus"
            filterable
          >
            <el-option
              v-for="item in channel_items.options"
              :key="item.channelCode"
              :label="item.channelCode+' '+item.name"
              :value="item.channelCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="渠道价："
          style="margin-bottom: 0;"
        >
          <el-form-item
            style="margin-bottom: 15px;"
            v-for="(item, index) in channelPro_from.channelPrices"
            :key="item.id"
            v-show="!item.deleted"
          >
            <el-date-picker
              size="small"
              style="width: 195px;"
              v-model="item.date"
              type="date"
              placeholder="选择日期"
              :disabled="false"
              @change="dateChange('channelPrices',index)"
            >
            </el-date-picker>
            <el-input
              size="small"
              style="width: 195px; margin-left: 10px;"
              v-model="item.price"
              :disabled="false"
              placeholder="请输入渠道价(元)"
              @change="priceInputChange(index)"
            ></el-input>
            <el-button
              size="small"
              style="margin-left: 10px;"
              v-if="index === 0"
              @click="addPrice"
            >添加</el-button>
            <el-button
              size="small"
              style="margin-left: 10px;"
              v-if="index !== 0"
              @click="deletePrice(index)"
            >删除</el-button>
            <span
              v-if="item.disexist"
              style="margin-left: 10px; color: red;"
            >* 已存在</span>
          </el-form-item>
        </el-form-item>
        <el-form-item
          label="选择时间:"
          style="margin-bottom: 0;"
        >
          <el-form-item
            style="margin-bottom: 15px;"
            v-for="(item, index) in channelPro_from.channelStatus"
            :key="item.id"
            v-show="!item.deleted"
          >
            <el-date-picker
              size="small"
              style="width: 195px;"
              v-model="item.onLineDate"
              type="date"
              placeholder="上线时间"
              :disabled="item.disable"
              @change="channelStatusDateChange('onLineDate',index)"
            >
            </el-date-picker>
            <el-date-picker
              size="small"
              style="width: 195px; margin-left: 10px;"
              v-model="item.offLineDate"
              type="date"
              placeholder="下线时间"
              :disabled="item.disable"
              @change="channelStatusDateChange('offLineDate',index)"
            >
            </el-date-picker>
            <el-button
              size="small"
              style="margin-left: 10px;"
              v-if="index === 0"
              @click="addStatus"
            >添加</el-button>
            <el-button
              size="small"
              style="margin-left: 10px;"
              v-if="index !== 0"
              @click="deleteStatus(index)"
            >删除</el-button>
          </el-form-item>
        </el-form-item>
        <el-form-item label="是否封包：">
          <el-radio-group
            size="small"
            v-model="channelPro_from.status"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Container>
    <Affix :offset-bottom="0">
      <ButtonGroup
        isFixed
        align="right"
      >
        <el-button
          size="small"
          @click="go_back()"
        >返回</el-button>
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
        >确认</el-button>
      </ButtonGroup>
    </Affix>
    <el-dialog
      title="提示"
      :visible.sync="importTitleStatus"
    >
      <div
        style="max-height: 400px; overflow: auto; line-height: 28px; margin-top: -20px;"
        v-html="importTitleTxt"
      ></div>
    </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
import Affix from "@/components/affix";
import ButtonGroup from "@/components/button-group";

export default {
  components: {
    Container,
    Affix,
    ButtonGroup
  },
  data() {
    return {
      pageTitle: "创建产品信息",
      menu_nav: ["CPA数据管理", "渠道产品管理", "创建产品信息"],
      isRightBox: false,
      dateStatus: false,
      importTitleStatus: false,
      importTitleTxt: "",
      channelPro_from: {
        channelCode: "",
        status: 0,
        channelPrices: [
          {
            date: "",
            deleted: false,
            disable: false,
            disexist: false,
            price: ""
          }
        ],
        customerProductCode: "",
        channelStatus: [
          {
            onLineDate: "",
            offLineDate: "",
            deleted: false,
            disable: false
          }
        ],
        customerCode: "",
        productCode: ""
      },
      lineDate: [],
      customer_items: {
        placeHolder: "客户",
        options: []
      },
      pro_items: {
        placeHolder: "产品",
        options: []
      },
      channelPro_items: {
        model_value: "",
        placeHolder: "上游渠道号",
        options: []
      },
      channel_items: {
        model_value: "",
        placeHolder: "渠道",
        options: []
      },
      options: {
        product: [
          {
            id: "",
            val: ""
          }
        ]
      },
      value3: "目前该时间点为上线状态",
      channelProductId: ""
    };
  },
  created() {
    this.channelProductId = this.$route.query.channelProductId;
    if (this.channelProductId != "") {
      this.pageInfo().then(() => {
        this.customerSelect();
        this.proInfo();
        this.channelProInfo();
      });
      this.pageTitle = "编辑产品信息";
      //                this.isRightBox = this.dateStatus = true;
      this.dateStatus = true;
    } else {
      this.customerSelect();
    }
  },
  methods: {
    customerSelect() {
      /*客户*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerSearch,
        params: {
          offset: 1,
          limit: 9999,
          val: ""
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.customer_items.options = data.items;
          }
        })
        .catch(() => {});
      /*投放渠道*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelSearch,
        params: {
          offset: 1,
          limit: 9999,
          val: ""
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            data.items.length > 0
              ? (this.channel_items.options = data.items)
              : null;
          }
        })
        .catch(() => {});
    },
    proInfo() {
      /*产品*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerProListLight,
        params: {
          customerCode: this.channelPro_from.customerCode
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.pro_items.options = data.items;
            this.channelProductId != ""
              ? null
              : (this.channelPro_from.productCode = "");
          }
        })
        .catch(() => {});
    },
    pageInfo() {
      return this.$http({
        method: "get",
        url: this.apiUrl.channelProGet,
        params: {
          id: this.channelProductId
        }
      })
        .then(res => {
          if (res.status === 200) {
            this.channelPro_from = res.data;
            this.channelPro_from.channelStatus.forEach(item => {
              item.isValueChange = false;
              this.lineDate.push({
                onLineDate: item.onLineDate,
                offLineDate: item.offLineDate
              });
            });
            this.channelPro_from.status = parseInt(this.channelPro_from.status);
          }
        })
        .catch(() => {});
    },
    channelProInfo() {
      /*上游渠道号*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerProSearch,
        params: {
          offset: 1,
          limit: 9999,
          type: 2,
          code: this.channelPro_from.productCode
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.channelPro_items.options = data.items;
            this.channelProductId != ""
              ? null
              : (this.channelPro_from.customerProductCode = "");
          }
        })
        .catch(() => {});
    },
    cusSelect() {
      this.proInfo();
    },
    proSelect() {
      this.channelProInfo();
    },
    onSubmit() {
      var pricesArr = this.channelPro_from.channelPrices;
      var pricesLen = pricesArr.length;
      let isexist = false; //判断是否有重复的渠道价
      if (this.channelProductId != "" && this.channelProductId) {
        for (let i = 0; i < pricesLen; i++) {
          if (
            (pricesArr[i].date == "" ||
              pricesArr[i].price == "" ||
              !pricesArr[i].date) &&
            !pricesArr[i].deleted
          ) {
            this.$message({
              type: "info",
              message: "渠道价不能为空，请修改并重新提交"
            });
            return false;
          }
          if (pricesArr[i].disexist) {
            isexist = true;
          }
        }
      } else {
        for (let i = 0; i < pricesLen; i++) {
          if (
            pricesArr[i].date == "" ||
            pricesArr[i].price == "" ||
            !pricesArr[i].date
          ) {
            pricesArr.splice(i, 1);
            i--;
            pricesLen = pricesArr.length;
          } else if (pricesArr[i].disexist) {
            isexist = true;
          }
        }
        if (pricesLen == 0) {
          this.addPrice();
        }
      }
      if (isexist) {
        this.$message({
          type: "info",
          message: "存在重复的渠道价，请修改或删除并重新提交"
        });
        return false;
      }
      let cStatus = this.channelPro_from.channelStatus;
      let cLen = cStatus.length;
      while (cLen--) {
        if (!cStatus[cLen].onLineDate && !cStatus[cLen].offLineDate) {
          cStatus.splice(cLen, 1);
        } else {
          cStatus[cLen].onLineDate = cStatus[cLen].onLineDate || "1970-01-01";
          cStatus[cLen].offLineDate = cStatus[cLen].offLineDate || "9999-12-31";
          if (
            cStatus[cLen].onLineDate >= cStatus[cLen].offLineDate &&
            !cStatus[cLen].deleted
          ) {
            this.$message({
              type: "info",
              message: "上线时间不能大于或等于下线时间，请修改并重新提交"
            });
            return false;
          }
        }
      }
      cLen = cStatus.length;
      if (cLen == 0) {
        this.addStatus();
        this.$message({
          type: "info",
          message: "上下线时间不能为空，请修改并重新提交"
        });
        return false;
      }
      var url = this.apiUrl.channelProNew;
      if (this.channelProductId != "") {
        url = this.apiUrl.channelProUpdate;
      }
      for (let key in this.channelPro_from) {
        if (
          key != "channelPrices" &&
          key != "status" &&
          this.channelPro_from[key] == ""
        ) {
          this.$message({
            type: "info",
            message: "名称、渠道号、渠道为空或数据异常，请重新选择并提交"
          });
          return false;
        }
      }
      this.$http({
        method: "post",
        url: url,
        data: this.channelPro_from
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            if (data.status == 2 || data.status < 0) {
              this.importTitleTxt = data.msg.replace(/\|/g, "<br>");
              this.$message({
                type: "info",
                message: this.importTitleTxt
              });
              this.importTitleStatus = true;
            } else {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.go_back();
            }
          } else {
            this.$message({
              type: "error",
              message: "操作失败，请完善信息，并重新提交"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "请完善信息，并重新提交"
          });
        });
    },
    go_back() {
      this.$router.back();
    },
    deletePrice(index) {
      var pricesArr = this.channelPro_from.channelPrices;
      var pricesLen = pricesArr.length;
      let isexist = false; //判断是否有重复的接入价
      if (this.channelProductId != "" && this.channelProductId) {
        for (let i = 0; i < pricesLen; i++) {
          if (pricesArr[i].disexist) {
            isexist = true;
          }
        }
      }
      if (isexist) {
        this.$message({
          type: "info",
          message: "存在重复的渠道价，请修改后再进行删除"
        });
        return false;
      }
      this.channelPro_from.channelPrices[index].deleted = true;
      this.channelPro_from.channelPrices[index].disexist = false;
    },
    deleteStatus(index) {
      this.channelPro_from.channelStatus[index].deleted = true;
    },
    addPrice() {
      this.channelPro_from.channelPrices.push({
        date: "",
        deleted: false,
        disable: false,
        disexist: false,
        price: ""
      });
    },
    addStatus() {
      this.channelPro_from.channelStatus.push({
        onLineDate: "",
        offLineDate: "",
        deleted: false,
        disable: false,
        isValueChange: false
      });
      this.lineDate.push({
        onLineDate: "",
        offLineDate: ""
      });
    },
    dateChange(str, index) {
      var date = this.channelPro_from[str][index].date || "";
      if (
        date != "" &&
        date != "undefined" &&
        typeof date != "undefined" &&
        date
      ) {
        this.channelPro_from[str][index].date = this.formatDateTime(
          new Date(date),
          "y-m-d"
        );
      } else {
        this.channelPro_from[str][index].date = "";
      }
      if (str == "channelPrices") {
        this.priceInputChange(index);
      }
    },
    channelStatusDateChange(str, index) {
      var date = this.channelPro_from.channelStatus[index][str] || "";
      if (
        date != "" &&
        date != "undefined" &&
        typeof date != "undefined" &&
        date
      ) {
        this.channelPro_from.channelStatus[index][str] = this.formatDateTime(
          new Date(date),
          "y-m-d"
        );
      } else {
        this.channelPro_from.channelStatus[index][str] = "";
      }
      if (this.dateStatus) this.lineDateChange(index);
    },
    lineDateChange(index) {
      let oldDate = this.lineDate[index];
      let newDate = this.channelPro_from.channelStatus[index];
      if (
        oldDate.onLineDate == newDate.onLineDate &&
        oldDate.offLineDate == newDate.offLineDate
      ) {
        newDate.isValueChange = false;
      } else {
        newDate.isValueChange = true;
      }
    },
    priceInputChange(index) {
      let priceArr = this.channelPro_from.channelPrices;
      let obj = this.channelPro_from.channelPrices[index];
      if (obj.price && obj.date) {
        try {
          priceArr.forEach((item, i) => {
            if (
              i != index &&
              item.date == obj.date &&
              item.price &&
              !item.deleted
            ) {
              obj.disexist = true;
              // foreach.break = new Error("StopIteration");
            } else if (
              i != index &&
              item.date != obj.date &&
              item.price &&
              !item.deleted
            ) {
              obj.disexist = false;
            }
          });
        } catch (e) {
          if (e.message === "foreach is not defined") {
            return;
          } else throw e;
        }
      } else {
        priceArr.forEach((item, i) => {
          if (item.disexist && item.date && item.price) {
            let flag = true;
            priceArr.forEach((c, x) => {
              if (i != x && item.date == c.date && c.price) {
                flag = false;
              }
            });
            flag ? (item.disexist = false) : null;
          } else {
            item.disexist = false;
          }
        });
      }
    },
    exitImportTitle() {
      this.importTitleStatus = false;
    }
  }
};
</script>
